<!--
 * @Author: your name
 * @Date: 2020-10-22 14:10:28
 * @LastEditTime: 2021-02-22 16:00:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\sunglasses\index.vue
-->
<template>
  <div class="polarized w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem"/>
    <banner :bannerImg="require('~/assets/image/polarized/polarized_sunglasses_7.png')" class="mb80">
      <template v-slot:txt>
        <article class="absolute banner_polarizedGlasses text_l article">
          <h1 class="size30 lh14 b mb20 cfff">{{$t('Polarized sunglasses')}}</h1>
          <p class="size16 cfff b mb10 lh14">{{$t('Reduce the polarization and glare.')}}</p>
          <p class="size16 cfff b mb10 lh14">{{$t('of the lens to provide better visual acuity.')}}</p>
        </article>
        <h3 class="absolute size26 cfff banner_polarized_non">{{$t('Non Polarized')}}</h3>
        <h3 class="absolute size26 cfff banner_polarized_pol">{{$t('Polarized')}}</h3>
      </template>
    </banner>
    <div class="wrapper">
      <div class="flex polarized_feature mb100">
        <div class="polarized_feature_left">
          <h3 class="size30 mb20 b">{{$t("Features of Polarized Sunglasses")}}</h3>
          <p class="size14 b ptb5">{{$t("Polarization occurs when light is reflected from a horizontal surface, such as a road, water or snow. ")}}</p>
          <p class="size14 b ptb5">{{$t("However, wearing a vertically oriented filter can help us to prevent this light from affecting our vision. ")}}</p>
          <p class="size14 b ptb5">{{$t("Polarized lenses have a special coating that allows them to block horizontal polarized light.")}}</p>
          <p class="size14 b ptb5">{{$t("In other words, only vertical light is allowed to pass through these filters. ")}}</p>
          <p class="size14 b ptb5">{{$t("They block annoying glare while allowing non-polarized light to pass through.")}}</p>
          <p class="size14 b ptb5">{{$t("Compared to standard tinted sunglasses, this provides better visual acuity. ")}}</p>
        </div>
        <div class="flex polarized_feature_right">
          <div class="polarized_feature_icon">
            <div class="relative pb10 text_c mb10">
              <img class="iconImg" :src="require('~/assets/image/polarized/polarized_sunglasses_8.png')" alt="">
              <img class="absolute iconRight" :src="require('~/assets/image/polarized/polarized_sunglasses_11.png')" alt="">
            </div>
            <p class="text_c size12 b white-no">{{$t("Eliminate lens flare reflection")}}</p>	
          </div>
          <div class="polarized_feature_icon">
            <div class="relative pb10 text_c mb10">
              <img class="iconImg" :src="require('~/assets/image/polarized/polarized_sunglasses_9.png')" alt="">
              <img class="absolute iconRight" :src="require('~/assets/image/polarized/polarized_sunglasses_11.png')" alt="">
            </div>		
            <p class="text_c size12 b white-no">{{$t("True color perception")}}</p>
          </div>
          <div class="polarized_feature_icon">
            <div class="relative pb10 text_c mb10">
              <img class="iconImg" :src="require('~/assets/image/polarized/polarized_sunglasses_10.png')" alt="">
              <img class="absolute iconRight" :src="require('~/assets/image/polarized/polarized_sunglasses_11.png')" alt="">
            </div>
            <p class="text_c size12 b white-no">{{$t("Reduce visual fatigue")}}</p>
          </div>
        </div>
      </div>
      <div class="polarized_scenes">
        <h3 class="size30 b mb20">{{$t("Which scenes need polarized sunglasses？")}}</h3>
        <p class="size14 b ptb5">{{$t("Polarized sunglasses are a necessity for outdoor activities.")}}</p>
        <p class="size14 b ptb5">{{$t("They are suitable for outdoor mountaineering, skiing, cycling, fishing, boating and other sports, helping to reduce glare, protect eyes and increase the fun of activities.")}}</p>
        <ul class="flex polarized_scenes_img ptb50">
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_1.png')" alt="">
            <h3 class="size18 b text_c">{{$t("Cycling")}}</h3>
          </li>
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_2.png')" alt="">
            <h3 class="size18 b text_c">{{$t("Skiing")}}</h3>
          </li>
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_3.png')" alt="">
            <h3 class="size18 b text_c">{{$t("Rowing")}}</h3>
          </li>
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_4.png')" alt="">
            <h3 class="size18 b text_c">{{$t("fishing")}}</h3>
          </li>
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_5.png')" alt="">
            <h3 class="size18 b text_c">{{$t("drive")}}</h3>
          </li>
          <li class="plr10 ptb10 s16">
            <img class="mb30 img" :src="require('~/assets/image/polarized/polarized_sunglasses_6.png')" alt="">
            <h3 class="size18 b text_c">{{$t("Mountaineering")}}</h3>
          </li>
        </ul>
      </div>     
    </div>     
    <filter-item :optionData="optionData" @checkedOptions="checkedOptions" class="filter-item"/>
    <product-list :productData="productData" @loadMoreData="loadMoreData" class="mb50"/>
  </div>
</template>

<script>
import ProductList from '~/components/common/ProductList';
import BreadCrumb from '~/components/common/Breadcrumb';
import Banner from '~/components/common/Banner';
import FilterItem from '~/components/common/FilterItem';
import { spliteParams } from '~/utils/Utils';
export default {
  name: 'polarizedglasses',
  async asyncData({req, params, query, route}) {
    let arr = await spliteParams(route.fullPath);
    return {
      productData:[
        {
          id: 1,
          baseUrl: require('~/assets/image/1_7.jpg'),
          imgs: [
            { url: require('~/assets/image/1_7.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 2,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 3,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 4,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        }
      ],
      optionData: [
        {
        code: "custom_color",
        label: "Color",
        options: [
            {
            id: "84",
            label: "Black",
            src: "/media/wysiwyg/color-images/Black.png')",
            },
            {
            id: "85",
            label: "Gray",
            src: "/media/wysiwyg/color-images/Gray.png')",
            },
            {
            id: "86",
            label: "Orange",
            src: "/media/wysiwyg/color-images/Orange.png')",
            },
        ],
        },
        {
        code: "gender",
        label: "Gender",
        options: [
            {
            label: "Men",
            src: "/media/wysiwyg/color-images/Men.png')",
            id: "53",
            },
            {
            id: "54",
            label: "Women",
            src: "/media/wysiwyg/color-images/Women.png')",
            },
        ],
        },
        {
        code: "material",
        label: "Material",
        options: [{
            id: "52",
            label: "Metal",
            src: "/media/wysiwyg/color-images/Metal.png')"
        }]
        },
        {
        code: "shape",
        label: "Shape",
        options: [
            {
            id: "71",
            label: "Cat eye",
            src: "/media/wysiwyg/color-images/Cat eye.png')"
            },
            {
            id: "69",
            label: "Rectangle",
            src: "/media/wysiwyg/color-images/Rectangle.png')"
            },
            {
            id: "70",
            label: "Round",
            src: "/media/wysiwyg/color-images/Round.png')"
            }
        ]
        },
        {
        code: "fit",
        label: "Fit",
        options: [{
            id: "73",
            label: "Medium",
            src: "/media/wysiwyg/color-images/Medium.png')"
        }]
        },
        {
        code: "feature",
        label: "Feature",
        options: [
            {
            id: "82",
            label: "Lightweight",
            src: "/media/wysiwyg/color-images/Lightweight.png')"
            }
        ]
        }
      ],
      breadcrumbTtem: arr || []
    }
  },
    components: {
      ProductList,
      BreadCrumb,
      Banner,
      FilterItem
    },
    watch: {
        $route(to, from) {
            if(to.fullPath !== from.fullPath) {
                this.breadcrumbTtem = spliteParams(to.fullPath);
            }
        }
    },
    methods: {
      checkedOptions (option) {
        console.log('option :>> ', option);
      }
      ,loadMoreData(curPage) {
        console.log('curPage :>> ', curPage);
      }
    }
}
</script>

<style lang="scss" scoped>
	.banner_polarizedGlasses {
		left: 30px;
		top: 150px;
	}
	.banner_polarized_non {
		right: 550px;
		bottom: 40px;
	}
	.banner_polarized_pol {
		right: 120px;
		bottom: 40px;
	}
	.polarized_feature {
		justify-content: space-between;
    align-items: flex-end;
	}
	.polarized_feature_right {
		width: 40%;
    justify-content: space-between;
	}
	.iconImg {
		width: 60px;
	}
	.iconRight {
		position: absolute;
		right: 35px;
		bottom: -5px;
	}
	.polarized_scenes_img {
		justify-content: space-around;
	}
	.s16{width: 16.67%;}
	.polarized_feature_icon{width:33%;}
  .banner_polarizedGlasses {
		left: 30px;
		top: 150px;
	}
	.banner_polarized_non {
		right: 550px;
		bottom: 40px;
	}
	.banner_polarized_pol {
		right: 120px;
		bottom: 40px;
	}
</style>